<template>
  <el-menu
    active-text-color="#4073FA"
    background-color="#282c34"
    text-color="#fff"
    default-active="1"
    router
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
  >
    <MenuTree
      v-for="(menuItem, index) in menuData"
      :key="menuItem.id"
      :menuItem="menuItem"
    />
  </el-menu>
</template>

<script setup>
import { ref, onMounted } from "vue";
import MenuTree from "./MenuTree.vue";

const menuData = ref([
  {
    id: "1",
    label: "控制台",
    url: "/dashboard",
  },
  {
    id: "2",
    label: "商品管理",
    url: "",
    children: [
      {
        id: "2-1",
        label: "商品列表",
        url: "/product/list",
      },
      {
        id: "2-2",
        label: "商品分类",
        url: "/product/category",
      },
      {
        id: "2-3",
        label: "品牌管理",
        url: "/product/brand",
      },
      {
        id: "2-4",
        label: "商品标签",
        url: "/product/tag",
      },
    ],
  },
  {
    id: "3",
    label: "订单管理",
    url: "",
    children: [
      {
        id: "3-1",
        label: "订单列表",
        url: "/order/list",
      },
      {
        id: "3-2",
        label: "退款单",
        url: "/order/refund",
      },
    ],
  },
  {
    id: "4",
    label: "用户管理",
    url: "",
    children: [
      {
        id: "4-1",
        label: "用户列表",
        url: "/user/list",
      },
      {
        id: "4-2",
        label: "用户分组",
        url: "/user/group",
      },
      {
        id: "4-3",
        label: "用户标签",
        url: "/user",
      },
    ],
  },
]);
const isCollapse = ref(false);
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu {
  height: 100%;
}
</style>
